<template>
  <div class="kw-form-item" :class="config.cls">
    <div class="kw-form-item-label">
      <span style="color:#ff5400;">{{config.name}}</span>
      <span class="desc">{{config.desc}}</span>
    </div>
    <div class="kw-form-item-content">
        <div class="kw-input-group">
            <input type="text" @input="handlerPropChange" v-model="defaultValue" disabled>
            <div class="kw-input-group-append">
                <kw-button type="blue" @on-click="showdialog=true">
                    <i class="iconfont icon-select-pointer"></i>
                </kw-button>
            </div>
        </div>
    </div>
    <kw-dialog v-model="showdialog" :title="dlgTitle" height="300px"
                @on-close="showdialog=false" @on-ok="handlerOnOk">
      <kw-tree :data="treeData" ref="dialogTree"></kw-tree>
    </kw-dialog>
  </div>
</template>

<script>
  import { prop } from '../../mixins/prop'
  export default {
    name: 'databinder-prop',
    mixins: [prop],
    data() {
        return {
            dlgTitle: '选择数据包',
            showdialog: false,
            treeData: []
        }
    },
    created() {
        this.$get('mock/dataPackage.json').then(resp => {
            this.toggleTreeData(resp)
            this.treeData = resp || []
        })
    },
    methods: {
        handlerOnOk() {
            let ret = this.$refs.dialogTree.getSelectedData()
            if (ret.length < 1) {
                this.$toast('请选择字段', {duration: 3000, position: 'top'})
                return
            }
            ret = ret[0]
            if (!ret.parent) {
                this.$toast('请选择字段', {duration: 3000, position: 'top'})
                return
            }
            this.defaultValue = ret.parent.name + '/' + ret.name
            this.showdialog = false
        },
        toggleTreeData(list, parent) {
            if (list) {
                list.forEach(c => {
                    c.parent = parent
                    this.toggleTreeData(c.children, c)
                })
            }
        }
    }
}
</script>

<style>

</style>